<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>压力评估 - 解压一刻</title>
  <link rel="stylesheet" href="../styles.css" />
  <link rel="stylesheet" href="views.css" />
  <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>
<body>
  <div class="app-container">
    <!-- 顶部状态栏 -->
    <header class="app-header">
      <div class="page-title">
        <h2>压力评估</h2>
      </div>
      <div class="user-profile">
        <img src="../assets/avatar.png" alt="用户头像" id="userAvatar" />
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content assessment-main">
      <!-- 评估介绍 -->
      <section class="assessment-intro">
        <div class="intro-icon">
          <lottie-player
            src="https://assets10.lottiefiles.com/packages/lf20_9k7x1w5m.json"
            background="transparent"
            speed="1"
            style="width: 100%; height: 100%"
            loop
            autoplay
          ></lottie-player>
        </div>
        <div class="intro-text">
          <h3>科学评估你的压力状态</h3>
          <p>通过专业量表评估，了解你的压力来源和程度，获取个性化减压建议</p>
          <div class="assessment-metrics">
            <div class="metric-item">
              <span class="metric-value">10</span>
              <span class="metric-label">个问题</span>
            </div>
            <div class="metric-item">
              <span class="metric-value">5</span>
              <span class="metric-label">分钟</span>
            </div>
            <div class="metric-item">
              <span class="metric-value">专业</span>
              <span class="metric-label">分析</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 开始评估按钮 -->
      <button class="primary-btn large-btn" id="startFullAssessment">
        开始压力评估
      </button>

      <!-- 历史记录 -->
      <section class="assessment-history">
        <div class="history-header">
          <h3>评估历史</h3>
          <a href="#" class="view-all">查看全部</a>
        </div>
        
        <div class="history-list">
          <!-- 最近评估 -->
          <div class="history-item recent">
            <div class="history-date">今天 10:23</div>
            <div class="history-result">
              <div class="result-indicator medium-stress"></div>
              <div class="result-details">
                <div class="result-title">中度压力</div>
                <div class="result-score">得分: 18/40</div>
              </div>
            </div>
            <div class="history-actions">
              <button class="view-report">查看报告</button>
            </div>
          </div>
          
          <!-- 历史记录1 -->
          <div class="history-item">
            <div class="history-date">3天前</div>
            <div class="history-result">
              <div class="result-indicator high-stress"></div>
              <div class="result-details">
                <div class="result-title">较高压力</div>
                <div class="result-score">得分: 25/40</div>
              </div>
            </div>
            <div class="history-actions">
              <button class="view-report">查看报告</button>
            </div>
          </div>
          
          <!-- 历史记录2 -->
          <div class="history-item">
            <div class="history-date">1周前</div>
            <div class="history-result">
              <div class="result-indicator low-stress"></div>
              <div class="result-details">
                <div class="result-title">轻度压力</div>
                <div class="result-score">得分: 12/40</div>
              </div>
            </div>
            <div class="history-actions">
              <button class="view-report">查看报告</button>
            </div>
          </div>
        </div>
      </section>

      <!-- 压力趋势 -->
      <section class="assessment-trends">
        <h3>压力趋势分析</h3>
        <div class="trends-chart">
          <canvas id="trendsChart"></canvas>
        </div>
        <div class="trends-insights">
          <div class="insight-item">
            <span class="insight-icon">📈</span>
            <span class="insight-text">近一周压力有所下降</span>
          </div>
          <div class="insight-item">
            <span class="insight-icon">⏰</span>
            <span class="insight-text">周三压力值通常较高</span>
          </div>
        </div>
      </section>
    </main>

    <!-- 底部导航 -->
    <nav class="bottom-nav">
      <a href="../index.html" class="nav-item" data-page="home">
        <span class="nav-icon home-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
            <polyline points="9 22 9 12 15 12 15 22"></polyline>
          </svg>
        </span>
        <span class="nav-text">首页</span>
      </a>
      <a href="games.html" class="nav-item" data-page="games">
        <span class="nav-icon games-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="6" width="20" height="12" rx="2"></rect>
            <line x1="6" y1="12" x2="10" y2="12"></line>
            <line x1="8" y1="10" x2="8" y2="14"></line>
            <circle cx="16" cy="12" r="2"></circle>
            <circle cx="18" cy="10" r="1"></circle>
          </svg>
        </span>
        <span class="nav-text">游戏</span>
      </a>
      <a href="assessment.html" class="nav-item active" data-page="assessment">
        <span class="nav-icon assessment-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="20" x2="18" y2="10"></line>
            <line x1="12" y1="20" x2="12" y2="4"></line>
            <line x1="6" y1="20" x2="6" y2="14"></line>
            <rect x="2" y="20" width="4" height="1"></rect>
            <rect x="8" y="20" width="4" height="1"></rect>
            <rect x="14" y="20" width="4" height="1"></rect>
          </svg>
        </span>
        <span class="nav-text">评估</span>
      </a>
      <a href="profile.html" class="nav-item" data-page="profile">
        <span class="nav-icon profile-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </span>
        <span class="nav-text">我的</span>
      </a>
    </nav>
  </div>

  <!-- 评估弹窗 -->
  <div class="modal" id="fullAssessmentModal">
    <div class="modal-content">
      <div class="modal-header">
        <h2>压力状态评估</h2>
        <span class="close-btn" id="closeAssessment">&times;</span>
      </div>
      <div class="modal-body">
        <div class="question-container">
          <div class="question-progress">
            <div class="progress-bar">
              <div class="progress-fill" id="assessmentProgress"></div>
            </div>
            <span id="questionCounter">1/10</span>
          </div>

          <div class="question" id="questionText">
            在过去的一周里，你是否经常感到无法控制生活中重要的事情？
          </div>

          <div class="options">
            <button class="option-btn" data-value="0">从不</button>
            <button class="option-btn" data-value="1">偶尔</button>
            <button class="option-btn" data-value="2">经常</button>
            <button class="option-btn" data-value="3">总是</button>
          </div>
        </div>

        <div class="results-container hidden" id="resultsContainer">
          <div class="result-header">
            <h2>评估结果</h2>
          </div>
          <div class="result-score">
            <div class="score-circle">
              <span id="resultScore">--</span>
            </div>
            <h3 id="resultLevel">中度压力</h3>
          </div>
          <div class="result-suggestions">
            <h3>减压建议</h3>
            <ul id="suggestionsList">
              <!-- 动态填充建议 -->
            </ul>
          </div>
          <button class="primary-btn" id="closeResults">保存报告</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="assessment.js"></script>
</body>
</html>